<template>
	<view class="container">
		<view class="wrapper">
			<view class="logo">
				<image src="https://res.huibiaow.cn/xcx/logo.png"></image>
			</view>
			<view class="loginHead">
				<view :class="{active:cur==0}" @click="cur=0">账号登录</view>
				<view :class="{active:cur==1}" @click="cur=1">手机登录</view>
			</view>
			<view class="loginBox">
				<view class="item" v-show="cur==0">
					<view class="input-content">
						<view class="input-item">
							<input type="number" :value="username" placeholder="请输入手机号" maxlength="11" data-key="username" @input="inputChange" />
						</view>
						<view class="input-item">
							<input type="password" :value="userPass" placeholder="请输入密码" data-key="userPass" @input="inputChange" />
						</view>
					</view>
					<button class="confirm-btn" @click="userToLogin" :disabled="logining">登录</button>
				</view>
				<view class="item" v-show="cur==1">
					<view class="input-content">
						<view class="input-item">
							<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
						</view>
						<view class="input-item">
							<view>
								<view class="left">
									<input type="" value="" placeholder="请输入短信验证码" placeholder-class="input-empty"  data-key="smsCode"
									 @input="inputChange" @confirm="toLogin" />
								</view>
								<button :type="hasSend ? 'default' : 'primary'" size="mini" @click="sendCode">
									{{hasSend ? '验证码已发送' : '发送验证码'}}
								</button>
							</view>
						</view>
					</view>
					<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
				</view>
			</view>
			
			<!-- #ifdef MP-WEIXIN -->	
			<view class="wechatBtn">
				<button class="confirm-btn wechat" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">
					<image v-if="showWxImg" src="/static/svgs/weixin.svg"></image>
					{{loginInfo}}
				</button>
			</view>
			<!-- #endif -->

			<!-- <view class="forget-section" @click="fakeLogin">
				忘记密码?
			</view> -->

		</view>
		<view class="register-section">
			没有账户？<text @click="toRegist('/pages/login/register')">免费注册</text>，查看会员价！
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				cur: 0,
				username:'',
				userPass:'',
				userCode:'',
				
				mobile: '',
				pictureCode: '',
				smsCode:'',
				
				logining: false,
				hasSend: false,
				loginCode: '',
				loginInfo: '',
				showWxImg: false,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.wxlogin();
			this.getData();
			// #endif
		},
		onTabItemTap(){
			// console.log('asdasd')
		},
		methods: {
			...mapMutations(['login','setUserInfo']),
			getData() {
				this.$request({
					url: 'getLoginInfo.json',
					success: (res) => {
						if (res.code == 200) {
							this.loginInfo = res.data.wx_info;
							this.showWxImg = res.data.show_wx_img;
						}
					},
				})
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
				if (key === 'mobile') {
					this.hasSend = false;
				}
			},
			navBack() {
				uni.navigateBack();
			},
			
			toRegist(url) {
				uni.navigateTo({
				    url: `/pages/login/register`
				});
			},
					
			async sendCode() {
				const mobile = this.mobile;
				if (this.hasSend) {
					uni.showToast({
						title: '验证码已发送，请注意查收',
						icon: 'none'
					})
				} else {
					if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
					} else {
						this.$request({
							url: 'sendCode.json',
							data: {
								'mobile': mobile
							},
							success: (res) => {
								if (res.code === 200) {
									uni.showToast({
										title: '验证码已发送'
									});
									this.mcode_id=res.data.mcode_id;
									this.hasSend = true;
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							}
						}, false);
					}
				}
			},
			
			async userToLogin() {
				const username = this.username;
				const userPass = this.userPass;
				// const userCode = this.userCode;
				if (username == "") {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}
				if (userPass == "") {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				// if (userCode.length != 4 && userCode == "") {
				// 	uni.showToast({
				// 		title: '请输入正确的验证码',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url: 'login1.json',
					data: {
						'username': username,
						'password': userPass,
					},
					success: (res) => {
						console.log(res)
						if (res.code === 200) {
							uni.showToast({
								title: '登录成功'
							});							
							this.logining = true;
							this.login(res.data);
							this.setUserInfo();
							uni.hideLoading();
							const eventChannel = this.getOpenerEventChannel()
							eventChannel.emit('login',{value:'success'});							
							uni.navigateBack();		

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				}, false);
				
			},
			
			async toLogin() {
				const mobile = this.mobile;
				const mcode_id = this.mcode_id || 1;
				const smsCode = this.smsCode;
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return;
				}
				// if (pictureCode.length != 4 && pictureCode == "") {
				// 	uni.showToast({
				// 		title: '请输入正确的验证码',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				if (!mcode_id || !smsCode || undefined==smsCode || smsCode.length != 6) {
					uni.showToast({
						title: '请输入正确的短信验证码',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url: 'login2.json',
					data: {
						'mobile': mobile,
						'mcode_id': mcode_id,
						'mcode':smsCode,
					},
					success: (res) => {
						// console.log(res)
						if (res.code === 200) {
							uni.showToast({
								title: '登录成功'
							});							
							this.logining = true;
							this.login(res.data);
							this.setUserInfo();
							uni.hideLoading();
							const eventChannel = this.getOpenerEventChannel()
							eventChannel.emit('login',{value:'success'});							
							uni.navigateBack();						
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				}, false);
			},
			
			async wxlogin(){
				const that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					that.loginCode = loginRes.code;
				  }
				});
			},
			getPhoneNumber(e){
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url: 'wxLogin.json',
					data: {
						'code': this.loginCode,
						'iv': e.detail.iv,
						'encryptedData': e.detail.encryptedData						
					},
					success: (res) => {						
						if (res.code === 200) {
							uni.showToast({
								title: '登录成功'
							});
							this.login(res.data);
							this.setUserInfo();
							uni.hideLoading();
							uni.navigateBack();						
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				}, false);
			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-top: 40upx;
		
		.logo{
			width: 233upx;	
			height: 80upx;
			margin: 0px auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.loginHead{
		padding: 0 60upx;
		display: flex;
		justify-content: center;
		color: #999999;
		font-size:36upx;
		margin: 80upx 0px;
		
		>view{
			width: 40%;
			text-align: center;
		}
		
		.active{
			color: #222222;
			position: relative;
			
			&:after{
				position: absolute;
				bottom: -20upx;
				right: 50%;
				transform: translateX(50%);
				content: '';
				width: 60upx;
				height: 4upx;
				background-color: #f42323;
			}
		}
		
	}

	.loginBox{
		.item{
			/* display: none;			
			&.active{
				display: block;				
			} */
			.input-content {
				padding: 0 60upx;
				margin-bottom: 50upx;
				
				.input-item {
					border-bottom: 1upx solid #b5b5b5;
					margin-bottom: 40upx;
				
					&:last-child {
						margin-bottom: 0;
					}
				
					>view {
						display: flex;
						align-items: center;
				
						.left {
							flex: 1;
						}
						
						.right{
							width: 100px;
							height: 28px;
							background-color: #ffe8e8;
						}
					}
								
					button {
						line-height: 56upx;
						height: 56upx;
						/* color: #fff; */
						background-color: #FFFFFF;
						color: #999999;
						border: none;
						border-left: 1px solid #999999;
						border-radius: 0;
						&:after{
							border: none;
						}
					}
				
					input {
						height: 80upx;
						font-size: 30upx;
						color: #333333;
						width: 100%;
						&.primary {
							background-color: #FFFFFF;
						}
					}
				}				
			}			
		}
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: 40px;
		top: 40upx;
		font-size: 40upx;
		color: red;
	}




	.confirm-btn {
		margin: 0px 30px;
		height: 80upx;
		line-height: 80upx;
		color: #fff;
		font-size: 30upx;
		background-image: linear-gradient(-90deg, #fd3131 0%, #ff6a47 100%);
		border-radius: 5px;
		opacity: 0.6;

		&.wechat {
			color: #50b674;
			border: solid 1px #a1dcb5;
			background-image: none;
			opacity: 1;
			background-color: #FFFFFF;
			margin-top:49upx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image{
				width: 50upx;
				height: 50upx;
				margin-right: 10upx;
			}			
		}
	}

/* 	.forget-section {
		font-size:30upx;
		color: red;
		text-align: center;
		margin-top: 40upx;
	} */

	.register-section {
		width: 100%;
		font-size: 30upx;
		text-align: center;
		margin-top:40upx;
		text {
			color: #fa3434;
			margin-left: 10upx;
		}
	}
</style>
